<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="app.css">
</head>
<body>

  <div class="phone">
    <div class="overlay"></div>
    <div class="dialog">
      <div class="goods">
        <div class="goods__header">
          <div class="goods__thumbnail">
            <img src="goods.png">
          </div>
          <div class="goods__profile">
            <div class="goods__price">5899.00</div>
            <div class="goods__intro">重量:0.47kg 编号:10085452111</div>
          </div>
        </div>
        <div class="goods__main">
          <!-- 颜色 -->
          <div class="goods__feature">
            <div class="goods__feature__label">颜色</div>
            <div class="goods__feature__items">
              <div class="goods__feature__item">黑色</div>
              <div class="goods__feature__item">白色</div>
              <div class="goods__feature__item">红色</div>
              <div class="goods__feature__item goods__feature__item--active">黄色</div>
              <div class="goods__feature__item">紫色</div>
              <div class="goods__feature__item">绿色</div>
            </div>
          </div>
          <!-- 版本 -->
          <div class="goods__feature">
            <div class="goods__feature__label">版本</div>
            <div class="goods__feature__items">
              <div class="goods__feature__item">64GB</div>
              <div class="goods__feature__item goods__feature__item--active">128GB</div>
              <div class="goods__feature__item">256GB</div>
            </div>
          </div>
          <!-- 购买方式 -->
          <div class="goods__feature">
            <div class="goods__feature__label">购买方式</div>
            <div class="goods__feature__items">
              <div class="goods__feature__item">公开版</div>
              <div class="goods__feature__item">保值换新版</div>
              <div class="goods__feature__item">换修无忧年付版</div>
              <div class="goods__feature__item">官方AppleCare+版</div>
              <div class="goods__feature__item">Airpods Pro套装</div>
              <div class="goods__feature__item goods__feature__item--active">Airpods 套装</div>
            </div>
          </div>
          <!-- 方式 -->
          <div class="goods__feature">
            <div class="goods__feature__label">方式</div>
            <div class="goods__feature__items">
              <div class="goods__feature__item goods__feature__item--active">官方标配</div>
            </div>
          </div>
        </div><!-- .goods__main -->
        <div class="goods__buy">
          <div class="goods__buy__item goods__buy__item--red">加入购物车</div>
          <div class="goods__buy__item goods__buy__item--yellow">立即购买</div>
        </div>
      </div>
    </div>
  </div>

  <script src="app.js"></script>
  
</body>
</html>